<template>
  <!-- 牌号管理 -->
  <div class="page-padding-bg">

  <div>
    <manager-table :titleOption="titleOption" :tableTopBtn="tableTopBtn" :columns="columns" :dataSource="dataSource" :tableRBtn="tableRBtn" @tableRClick="tableRClick" @tableTopClick="tableTopClick"
      v-model="search1" v-model:search2="search2" @search_btn="search_btn" @resert="resert"></manager-table>

    <Pagination :currentPage="currentPage" :limit="limit" :total="total" @page_change="page_change"></Pagination>

    <!-- 弹层 -->
    <lay-layer v-model="is_visible" :area="['500px', '300px']" :title="visibleTitle" :btn="visible_opteron">
      <div style="padding: 20px 40px 20px 20px;">
        <lay-form :model="form" ref="layFormRef11">
          <lay-form-item label="牌号名称" prop="smokeModel">
            <lay-input v-model="form.smokeModel" size="sm" placeholder="请输入"></lay-input>
          </lay-form-item>
          <lay-form-item label="津贴金额" prop="smokePerk">
            <lay-input v-model="form.smokePerk" size="sm" disabled></lay-input>
          </lay-form-item>
 
        </lay-form>
      </div>
    </lay-layer>

  </div>

  </div>
</template>

<script setup lang="ts">
import { layer } from "@layui/layui-vue";
import ManagerTable from "@/components/ManagerTable.vue";
import http from "@/http/index";
import { onMounted, ref } from "vue";
import Pagination from "@/components/pagination.vue";

interface FormType {
  smokeModel: string;
  smokePerk: number | string;
}
// 上方查询配置
const titleOption = ref({
  name1: "牌号",
  name2: "津贴",
  btn1: "查询",   
  btn2: "重置",
});
// 表格上方配置
const tableTopBtn = ref([
  {
    name: "新增",
    type: "primary",
    clickType: "add",
    id: "1",
    btnPer:"mark_add"
  },
  //   {
  //     name: "修改",
  //     type: "primary",
  //     clickType: "edit",
  //     id: "2",
  //   },
  //   {
  //     name: "删除",
  //     type: "danger",
  //     clickType: "del",
  //     id: "3",
  //   },
]);
// table 右侧配置
const tableRBtn = ref([
  {
    name: "修改",
    type: "primary",
    clickType: "edit",
    id: "1",
    btnPer:"mark_edit"
  },
  {
    name: "删除",
    type: "danger",
    clickType: "del",
    id: "2",
    btnPer:"mark_delete"
  },
]);

// 弹层控制
const is_visible = ref(false);
// 弹层表单
const form = ref<FormType>({
  smokeModel: "",
  smokePerk: 15,
});

// 牌号  津贴
const search1 = ref("");
const search2 = ref("");

// 弹层title
const visibleTitle = ref("");
// 弹层按钮
const visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      if (form.value.smokeModel == "" || form.value.smokePerk == "") {
        layer.msg("请检查输入收否完整", { time: 1500, icon: 2 });
        return false;
      }

      let data = {};
      let tip = "";
      let methods = "";
      if (visibleTitle.value == "添加") {
        data = form.value;
        tip = "添加";
        methods = "post";
      } else if (visibleTitle.value == "修改") {
        data = { ...form.value, id: tableID.value };
        tip = "修改";
        methods = "put";
      }

      const res = await http.corsApi("/smokeAllowance", methods, data);
      console.log(res);
      if (res.data) {
        // await get_list(pageNo.value, pageSize.value);
        layer.confirm(tip + "成功", { icon: 1 });
        is_visible.value = false;
      }

      await get_list(pageNo.value, pageSize.value);
    }, 
  },
  {
    text: "取消",
    callback: () => {
      is_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 表格配置
const columns = ref([
  {
    title: "牌号",
    key: "smokeModel",
  },
  {
    title: "津贴",
    key: "smokePerk",
  },
  {
    title: "创建人",
    key: "creator",
  },
  {
    title: "创建时间",
    key: "createday",
  },
  {
    title: "操作",
    customSlot: "operator",
    key: "operator",
  },
]);
const dataSource = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
// 当前点击的id
const tableID = ref("");
// 表格操作按钮
const tableRClick = (item, row) => {
  console.log(item, row);
  if (item.clickType === "edit") {
    visibleTitle.value = "修改";
    is_visible.value = true;
    form.value.smokeModel = row.smokeModel;
    form.value.smokePerk = row.smokePerk;
    tableID.value = row.id;
  }

  if (item.clickType === "del") {
    layer.confirm("确认要删除吗？", {
      btn: [
        {
          text: "确认",
          callback: async (id) => {
            const res = await http.corsApi("/smokeAllowance/batch", "delete", [row.id]);
            console.log(res);
            if (res.data) {
              await get_list(pageNo.value, pageSize.value);
              await layer.confirm("删除成功", { icon: 1 });
            }
            layer.close(id);
          },
        },
        {
          text: "取消",
          callback: (id) => {
            layer.close(id);
          },
        },
      ],
    });
  }
};
// 表格上方按钮
const tableTopClick = (item) => {
  console.log(search1.value, search2.value);

  console.log(item);
  if (item.clickType === "add") {
    visibleTitle.value = "添加";
    is_visible.value = true;
    Object.keys(form.value).forEach((key) => (form.value[key] = ""));

    form.value.smokePerk =15
  }
};

// 查询
// 查询
const search_btn = async () => {
  await get_list(pageNo.value, pageSize.value);
};
// 重置
const resert = async () => {
  search1.value = '';
  search2.value = '';
  await get_list(pageNo.value, pageSize.value);
};

// 分页
const limit = ref(10);
const total = ref(0);
const currentPage = ref(1);
// 分页事件
const page_change = async (page, limt) => {
  console.log(page, limt);
  currentPage.value = page;
  await get_list(page, limt);
}; 

const get_list = async (page: number | string, pagesize: number | string) => {
  const res = await http.corsApi("/smokeAllowance/page", "get", {
    pageNo: page,
    pageSize: pagesize,
    smokeModel: search1.value,
    smokePerk: search2.value,
  }); 

  console.log(res);
  dataSource.value = res.data.list;
  total.value = res.data.totalCount;
};

// 页面初始化、
onMounted(() => {
  get_list(pageNo.value, pageSize.value);
});
</script>

<style scoped>
</style>